

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/HexoPage/img/favicon.jpeg">
  <link rel="icon" href="/HexoPage/img/favicon.jpeg">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="xiaoaodi">
  <meta name="keywords" content="">
  
    <meta name="description" content="JavaScript学习笔记（第三部分）总共四部分6. 常用类和方法6.1 包装类计时器：当我们需要测试某一段代码执行的效率，计时器就显得尤为的重要了，计时器的使用： 12345678&lt;script&gt;    console.time(&quot;test&quot;);    for(var i &#x3D; 0 ; i&lt; 10000;i++)    &amp;#123;        conso">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript学习笔记（第三部分）总共四部分">
<meta property="og:url" content="http://xiao_aodi.gitee.io/hexopage/2022/03/19/js%E7%AC%AC%E4%B8%89%E9%83%A8%E5%88%86%E7%AC%94%E8%AE%B0/index.html">
<meta property="og:site_name" content="~吃椰子灰的胖丁">
<meta property="og:description" content="JavaScript学习笔记（第三部分）总共四部分6. 常用类和方法6.1 包装类计时器：当我们需要测试某一段代码执行的效率，计时器就显得尤为的重要了，计时器的使用： 12345678&lt;script&gt;    console.time(&quot;test&quot;);    for(var i &#x3D; 0 ; i&lt; 10000;i++)    &amp;#123;        conso">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="c:/Users/hasee/AppData/Roaming/Typora/typora-user-images/image-20220319161659485.png">
<meta property="article:published_time" content="2022-03-19T14:30:00.000Z">
<meta property="article:modified_time" content="2022-03-20T07:57:27.350Z">
<meta property="article:author" content="xiaoaodi">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="c:/Users/hasee/AppData/Roaming/Typora/typora-user-images/image-20220319161659485.png">
  
  
  <title>JavaScript学习笔记（第三部分）总共四部分 - ~吃椰子灰的胖丁</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4/github-markdown.min.css" />
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hint.css@2/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.css" />
  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/HexoPage/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"xiao_aodi.gitee.io","root":"/HexoPage/","version":"1.8.14","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":false,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/HexoPage/local-search.xml"};
  </script>
  <script  src="/HexoPage/js/utils.js" ></script>
  <script  src="/HexoPage/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 6.1.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/HexoPage/">
      <strong>Xiao_aodi</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>
   
      <!-- 天气网 -->
      


    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/HexoPage/img/wallhaven-wqve97.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="JavaScript学习笔记（第三部分）总共四部分">
              
            </span>
            
              <div class="mt-3">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-author" aria-hidden="true"></i>
      xiaoaodi
    </span>
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2022-03-19 22:30" pubdate>
        2022年3月19日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      38k 字
    </span>
  

  
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      319 分钟
    </span>
  

  
  
    
      <!-- 不蒜子统计文章PV -->
      <span id="busuanzi_container_page_pv" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="busuanzi_value_page_pv"></span> 次
      </span>
    
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">JavaScript学习笔记（第三部分）总共四部分</h1>
            
              <p class="note note-info">
                
                  本文最后更新于：2022年3月20日 下午
                
              </p>
            
            <div class="markdown-body">
              <h2 id="JavaScript学习笔记（第三部分）总共四部分"><a href="#JavaScript学习笔记（第三部分）总共四部分" class="headerlink" title="JavaScript学习笔记（第三部分）总共四部分"></a>JavaScript学习笔记（第三部分）总共四部分</h2><h3 id="6-常用类和方法"><a href="#6-常用类和方法" class="headerlink" title="6. 常用类和方法"></a>6. 常用类和方法</h3><h4 id="6-1-包装类"><a href="#6-1-包装类" class="headerlink" title="6.1 包装类"></a>6.1 包装类</h4><p>计时器：当我们需要测试某一段代码执行的效率，计时器就显得尤为的重要了，计时器的使用：</p>
<figure class="highlight html"><table><tr><td class="gutter"><div class="code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></div></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">time</span>(<span class="hljs-string">&quot;test&quot;</span>);</span><br><span class="language-javascript">    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span> ; i&lt; <span class="hljs-number">10000</span>;i++)</span><br><span class="language-javascript">    &#123;</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;测试某一段函数的执行时间&quot;</span>);</span><br><span class="language-javascript">    &#125;</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">timeEnd</span>(<span class="hljs-string">&quot;test&quot;</span>); <span class="hljs-comment">//执行这段代码用时test: 79.40283203125 ms</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>



<p>在js中为我们提供了<strong>三个包装类：String()、 Boolean()、 Number()</strong></p>
<p>通过这三个包装类可以创建基本数据类型的对象，但是我们一般不直接使用new 来创建出改对象使用。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> number = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Number</span>();</span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> str =<span class="hljs-keyword">new</span> <span class="hljs-title class_">String</span>();</span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> bflag = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Boolean</span>();</span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>但是实际的工作过程中千万千万不要这样使用！！会带来一些不可预期的结果。</p>
<p>在我们日常的使用过程中，我们对一些基本的数据类型的值去调用属性和方法的时候，浏览器会临时使用包装类转化其对象，然后去调用属性和方法，调用完以后，再将其转化为基本的数据类型</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;1231&quot;</span>;</span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> num  = <span class="hljs-title class_">Number</span>(str);<span class="hljs-comment">//在这个过程中其实调用了包转类 底层的实现，有兴趣可以看源码</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num);<span class="hljs-comment">//1231</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>字符串在底层其实都是以字符数组的形式保存的。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;HELLO WORLD&quot;</span>;</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str.<span class="hljs-title function_">charAt</span>(<span class="hljs-number">1</span>));<span class="hljs-comment">//E</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str[<span class="hljs-number">0</span>]);<span class="hljs-comment">//H</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str.<span class="hljs-property">length</span>);<span class="hljs-comment">//11</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>获取字符的unnicode编码charCodeAt函数  根据unnicode编码获得字符fromCharCode函数</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs html">	<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;HELLO WORLD&quot;</span>;</span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> str = str.<span class="hljs-title function_">charCodeAt</span>(<span class="hljs-number">1</span>);</span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str);  <span class="hljs-comment">//69  unnicode编码</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> tmp = <span class="hljs-title class_">String</span>.<span class="hljs-title function_">fromCharCode</span>(<span class="hljs-number">1254</span>);</span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp); <span class="hljs-comment">//Ӧ</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>查找字符串中是否有该字符indexof从前往后查找  lastindexof从后往前查找</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;HELLO WORLED&quot;</span>;</span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> tmp = str.<span class="hljs-title function_">indexOf</span>(<span class="hljs-string">&quot;E&quot;</span>);</span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> tmp1 = str.<span class="hljs-title function_">lastIndexOf</span>(<span class="hljs-string">&quot;E&quot;</span>);</span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp); <span class="hljs-comment">//1</span></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp1);  <span class="hljs-comment">//10</span></span><br><span class="language-javascript">  </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;Hello world&quot;</span>;</span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> tmp = str.<span class="hljs-title function_">slice</span>(<span class="hljs-number">0</span>,<span class="hljs-number">3</span>);</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp); <span class="hljs-comment">//Hel</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">     <span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;Hello world&quot;</span>;</span><br><span class="language-javascript">     <span class="hljs-keyword">var</span> tmp = str.<span class="hljs-title function_">substring</span>(<span class="hljs-number">0</span>,<span class="hljs-number">3</span>);<span class="hljs-comment">//必须要两个参数，slice可以只有一个参数，第二个参数小于自动进行参数的交换</span></span><br><span class="language-javascript">     <span class="hljs-keyword">var</span> tmp1 = str.<span class="hljs-title function_">substring</span>(<span class="hljs-number">4</span>,-<span class="hljs-number">4</span>); <span class="hljs-comment">//传了负值自动会变为0。</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp); <span class="hljs-comment">//Hel</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp1);<span class="hljs-comment">//Hell</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;Hello world&quot;</span>;</span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> tmp = str.<span class="hljs-title function_">substr</span>(<span class="hljs-number">0</span>,<span class="hljs-number">3</span>);<span class="hljs-comment">//截取字符串的长度</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp);<span class="hljs-comment">//Hel</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;Hello,world,my,sister,aa&quot;</span>;</span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> tmp = str.<span class="hljs-title function_">split</span>(<span class="hljs-string">&quot;,&quot;</span>);<span class="hljs-comment">//截取字符串的标识位</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp);<span class="hljs-comment">//数组存放 Hello,world,my,sister,aa</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;ASDADAWEQW&quot;</span>;</span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> str1 = <span class="hljs-string">&quot;asdadada&quot;</span>;</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str1.<span class="hljs-title function_">toUpperCase</span>()); <span class="hljs-comment">//ASDADADA</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str.<span class="hljs-title function_">toLowerCase</span>());<span class="hljs-comment">//asdadaweqw</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-comment">&lt;!-- 注意：都不会影响原有的字符串 --&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="6-2-Date-时间对象"><a href="#6-2-Date-时间对象" class="headerlink" title="6.2 Date(时间对象)"></a>6.2 Date(时间对象)</h4><p>日期的对象，js中通过Date对象来表示一个时间<br>创建对象的两种方式：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> date = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(); <span class="hljs-comment">//创建一个当前的时间对象</span></span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(date);   <span class="hljs-comment">//Sat Mar 19 2022 13:56:55 GMT+0800 (中国标准时间)</span></span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> date_1 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-string">&quot;12/01/2022 13:10:30&quot;</span>);  <span class="hljs-comment">//创建自定义的时间对象</span></span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(date_1);<span class="hljs-comment">//Thu Dec 01 2022 13:10:30 GMT+0800 (中国标准时间)</span></span><br><span class="language-javascript">  </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>自定义的日期的格式：var d &#x3D; new Date(“月&#x2F;日&#x2F;年 时:分:秒”);</p>
<p><strong>方法：</strong></p>
<table>
<thead>
<tr>
<th align="left">name</th>
<th align="left"></th>
</tr>
</thead>
<tbody><tr>
<td align="left">getDate()</td>
<td align="left">当前日期对象是几日（1-31）</td>
</tr>
<tr>
<td align="left">getDay()</td>
<td align="left">返回当前日期对象时周几（0-6） 0 周日 1 周一 。。。</td>
</tr>
<tr>
<td align="left">getMonth()</td>
<td align="left">返回当前日期对象的月份（0-11） 0 一月 1 二月 。。。</td>
</tr>
<tr>
<td align="left">getFullYear()</td>
<td align="left">从 Date 对象以四位数字返回年份。</td>
</tr>
<tr>
<td align="left">getHours()</td>
<td align="left">返回 Date 对象的小时 (0 ~ 23)。</td>
</tr>
<tr>
<td align="left">getMinutes()</td>
<td align="left">返回 Date 对象的分钟 (0 ~ 59)。</td>
</tr>
<tr>
<td align="left">getSeconds()</td>
<td align="left">返回 Date 对象的秒数 (0 ~ 59)。</td>
</tr>
<tr>
<td align="left">getMilliseconds()</td>
<td align="left">返回 Date 对象的毫秒(0 ~ 999)。</td>
</tr>
<tr>
<td align="left">getTime()</td>
<td align="left">返回当前日期对象的时间戳 时间戳，指的是从1970年月1日 0时0分0秒，<strong>到现在时间的毫秒数</strong> 计算机底层保存时间都是以时间戳的形式保存的。</td>
</tr>
<tr>
<td align="left">Date.now()</td>
<td align="left">可以获取当前代码执行时的时间戳</td>
</tr>
<tr>
<td align="left">setHours()</td>
<td align="left">设置 Date 对象中的小时 (0 ~ 23)</td>
</tr>
</tbody></table>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">     <span class="hljs-comment">//时间date函数的测试使用</span></span><br><span class="language-javascript">     <span class="hljs-keyword">var</span> date = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>();</span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(date);<span class="hljs-comment">// Sat Mar 19 2022 20:06:40 GMT+0800 (中国标准时间)</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(date.<span class="hljs-title function_">getDate</span>());<span class="hljs-comment">//当月的多少日 19</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(date.<span class="hljs-title function_">getDay</span>());<span class="hljs-comment">//星期几 6  0-6的范围 0表示周天</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(date.<span class="hljs-title function_">getMonth</span>());<span class="hljs-comment">//第几个月 2 但是这里表示的是3月 月份的值要+1  0表示一月</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(date.<span class="hljs-title function_">getFullYear</span>());<span class="hljs-comment">//从 Date 对象以四位数字返回年份 2022</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(date.<span class="hljs-title function_">getHours</span>()); <span class="hljs-comment">//14</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(date.<span class="hljs-title function_">getMinutes</span>()); <span class="hljs-comment">//6</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(date.<span class="hljs-title function_">getMilliseconds</span>());  <span class="hljs-comment">//366</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Date</span>.<span class="hljs-title function_">now</span>());<span class="hljs-comment">//时间戳 //1647670000367</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(date.<span class="hljs-title function_">setHours</span>(<span class="hljs-number">20</span>)); <span class="hljs-comment">//设置多少点了 1647691600366</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(date); <span class="hljs-comment">//Sat Mar 19 2022 20:06:40 GMT+0800 (中国标准时间)</span></span><br><span class="language-javascript"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>注意：在计算机的底层保存的时间其实都是时间戳。</p>
<h4 id="6-3-Math对象"><a href="#6-3-Math对象" class="headerlink" title="6.3 Math对象"></a>6.3 Math对象</h4><p>Math和其他的对象不一样，它不是一个构造函数，它属于一个工具类不用创建对象，他里边封装了数学运算的属性和方法 ,我们可以直接使用它来进行数学运算相关的操作。</p>
<p>方法：Math.PI 常量，圆周率</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-property">PI</span>);<span class="hljs-comment">//3.141592653589793</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>


<p>Math.abs() 绝对值运算</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">abs</span>(-<span class="hljs-number">1000</span>));<span class="hljs-comment">//1000</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>Math.ceil() 向上取整</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">ceil</span>(<span class="hljs-number">10.2</span>));<span class="hljs-comment">//11</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>Math.floor()  向下取整</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(<span class="hljs-number">10.2</span>));<span class="hljs-comment">//10</span></span><br><span class="language-javascript">  </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>	<br></code></pre></td></tr></table></figure>

<p>Math.round() 四舍五入取整</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs hmtl"> &lt;script&gt;<br>    console.log(Math.round(10.3));//10<br>    console.log(Math.round(10.5));//11<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<p>Math.random()<br>生成一个01之间的随机数<br>生成一个xy之间的随机数<br>Math.round(Math.random()*(y-x)+x);</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>; i &lt; <span class="hljs-number">10</span>; i++) <span class="hljs-comment">//0-1之间的随便数</span></span><br><span class="language-javascript">       &#123;</span><br><span class="language-javascript">           <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>());<span class="hljs-comment">//10</span></span><br><span class="language-javascript">       &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-comment">//生成1-10的数</span></span><br><span class="language-javascript">       <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>; i &lt; <span class="hljs-number">10</span>; i++)</span><br><span class="language-javascript">       &#123;</span><br><span class="language-javascript">           <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">round</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>()*<span class="hljs-number">9</span> +<span class="hljs-number">1</span> ));<span class="hljs-comment">//10</span></span><br><span class="language-javascript">       &#125;</span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>Math.pow(x,y) 求x的y次幂</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">pow</span>(<span class="hljs-number">16</span>,<span class="hljs-number">2</span>));<span class="hljs-comment">//256</span></span><br><span class="language-javascript">  </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>Math.sqrt() 对一个数进行开方</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sqrt</span>(<span class="hljs-number">16</span>));<span class="hljs-comment">//4</span></span><br><span class="language-javascript">  </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>Math.max()求多个数中最大值  Math.min()求多个数中的最小值</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">     <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">213</span>,<span class="hljs-number">231</span>,<span class="hljs-number">2314</span>,<span class="hljs-number">34</span>,<span class="hljs-number">534</span>,<span class="hljs-number">56</span>,<span class="hljs-number">1231</span>];</span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">max</span>(<span class="hljs-number">12</span>,<span class="hljs-number">3</span>,<span class="hljs-number">213</span>,<span class="hljs-number">434</span>,<span class="hljs-number">45</span>,<span class="hljs-number">45</span>,<span class="hljs-number">234</span>));<span class="hljs-comment">//434</span></span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">min</span>(<span class="hljs-number">12</span>,<span class="hljs-number">3</span>,<span class="hljs-number">213</span>,<span class="hljs-number">434</span>,<span class="hljs-number">45</span>,<span class="hljs-number">45</span>,<span class="hljs-number">234</span>));<span class="hljs-comment">//3</span></span><br><span class="language-javascript">  </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="7-正则表达式"><a href="#7-正则表达式" class="headerlink" title="7. 正则表达式"></a>7. 正则表达式</h3><p>正则用来定义一些字符串的规则，程序可以根据这些规则来判断一个字符串是否符合规则，也可以将一个字符串中符合规则的内容提取出来。</p>
<p><strong>创建正则表达式</strong>:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs html"> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> reg = <span class="hljs-keyword">new</span> <span class="hljs-title class_">RegExp</span>(<span class="hljs-string">&quot;a&quot;</span>);</span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;fsafasd&quot;</span>));<span class="hljs-comment">//true</span></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> reg_1 = <span class="hljs-regexp">/aad/g</span>; <span class="hljs-comment">// g代表匹配模式</span></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg_1.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;fsaadafasd&quot;</span>));<span class="hljs-comment">//true test()方法用来检查一个字符串是否符合正则表达式的原则</span></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> reg);<span class="hljs-comment">//object</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>var reg &#x3D; new RegExp(“正则”,”匹配模式”); 注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，如果要使用\则需要使用\来代替</p>
<p>var reg &#x3D; &#x2F;正则表达式&#x2F;匹配模式 （匹配模式可以多个一起写：&#x2F;gi）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> reg = <span class="hljs-keyword">new</span> <span class="hljs-title class_">RegExp</span>(<span class="hljs-string">&quot;a&quot;</span>,<span class="hljs-string">&quot;i&quot;</span>);</span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;sdsdsdAAAAa&quot;</span>));<span class="hljs-comment">//true</span></span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;ERWRWR&quot;</span>));<span class="hljs-comment">//false</span></span><br><span class="language-javascript">  </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>匹配模式：i: 忽略大小写（ignore） g:全局匹配模式（默认为1次）<br>设置匹配模式时，可以都不设置，也可以设置1个，也可以全设置，设置时没有顺序要求</p>
<p><strong>正则语法</strong><br>**| 或   [] 或  **</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> reg = <span class="hljs-keyword">new</span> <span class="hljs-title class_">RegExp</span>(<span class="hljs-string">&quot;a|b|c&quot;</span>,<span class="hljs-string">&quot;i&quot;</span>);</span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;addd&quot;</span>));<span class="hljs-comment">//true</span></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;ddddd&quot;</span>));<span class="hljs-comment">//false</span></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;cdddd&quot;</span>));<span class="hljs-comment">//true</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> reg = <span class="hljs-keyword">new</span> <span class="hljs-title class_">RegExp</span>(<span class="hljs-string">&quot;[abc]&quot;</span>,<span class="hljs-string">&quot;i&quot;</span>);  <span class="hljs-comment">//[这个里面其实也是或的意思]  [abc] = a|b|c</span></span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;addd&quot;</span>));<span class="hljs-comment">//true</span></span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;ddddd&quot;</span>));<span class="hljs-comment">//false</span></span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;cdddd&quot;</span>));<span class="hljs-comment">//true</span></span><br><span class="language-javascript">  </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>^ 除了     [a-z] 小写字母 （也可以[e-i])</strong></p>
<p><strong>[A-Z] 大写字母</strong><br><strong>[A-z] 任意字母,但是还包括了其他ASCII在此之中的</strong><br><strong>[0-9] 任意数字</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> reg = <span class="hljs-keyword">new</span> <span class="hljs-title class_">RegExp</span>(<span class="hljs-string">&quot;[a-z]&quot;</span>);  <span class="hljs-comment">//[任意的小写字母]</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;addd&quot;</span>));<span class="hljs-comment">//true</span></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> reg = <span class="hljs-keyword">new</span> <span class="hljs-title class_">RegExp</span>(<span class="hljs-string">&quot;[A-Z]&quot;</span>);  <span class="hljs-comment">//[任意的大写字母]</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;aDdd&quot;</span>));<span class="hljs-comment">//true</span></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> reg = <span class="hljs-keyword">new</span> <span class="hljs-title class_">RegExp</span>(<span class="hljs-string">&quot;[A-z]&quot;</span>);  <span class="hljs-comment">//[任意的字母]</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;aDdd&quot;</span>));<span class="hljs-comment">//true</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> reg = <span class="hljs-keyword">new</span> <span class="hljs-title class_">RegExp</span>(<span class="hljs-string">&quot;[^0-9]&quot;</span>);  <span class="hljs-comment">//[任意的小写字母]</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;124545a&quot;</span>));<span class="hljs-comment">//true</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;124545&quot;</span>));<span class="hljs-comment">//false</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>元符号</strong></p>
<p>检查一个字符串中是否含有 .<br>. 表示任意字符<br>在正则表达式中使用\作为转义字符<br>. 来表示.<br>\ 表示\</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> reg = <span class="hljs-keyword">new</span> <span class="hljs-title class_">RegExp</span>(<span class="hljs-string">&quot;\.&quot;</span>);</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;sddd&quot;</span>)); <span class="hljs-comment">//true</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;!@#!@#&quot;</span>));<span class="hljs-comment">//true</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>\w 任意字母、数字、_ [A-z0-9_]<br>\W 除了字母、数字、_ [ ^A-z0-9_]</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html">  <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/\w/</span>;</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;sddd&quot;</span>)); <span class="hljs-comment">//true \w 任意字母、数字、_ [A-z0-9_]</span></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> reg1 = <span class="hljs-regexp">/\W/</span>;</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg1.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;!@#!@#&quot;</span>));<span class="hljs-comment">//true  \W 除了字母、数字、_ [ ^A-z0-9_]</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>\d任意的数字 [0-9]<br>\D除了数字 [ ^0-9]</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/\d/</span>;</span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;sd1dd&quot;</span>)); <span class="hljs-comment">//true  \d任意的数字 [0-9]</span></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> reg1 = <span class="hljs-regexp">/\D/</span>;</span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg1.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;!@#!@#&quot;</span>));<span class="hljs-comment">//true \D除了数字 [ ^0-9]</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>\s空格<br>\S除了空格</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/\S/</span>;</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;sd1dd&quot;</span>)); <span class="hljs-comment">//true \S除了空格</span></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> reg1 = <span class="hljs-regexp">/\s/</span>;</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg1.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;!@ #!@#&quot;</span>));<span class="hljs-comment">//true \s空格</span></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>\b单词边界<br>\B除了单词边界</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/b\b/</span>; </span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;sdb 1dd&quot;</span>)); <span class="hljs-comment">//true \b单词边界 b后面有空格</span></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> reg1 = <span class="hljs-regexp">/\B/</span>;</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg1.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;!@#!@#x&quot;</span>));<span class="hljs-comment">//true \B除了单词边界 没有空格</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>split()函数的使用</strong></p>
<p>可以将一个字符串拆分成一个数组，方法参数中可以传正则表达式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;2h3hu1h4gg14f41fd41hh1i5hih636j221g&quot;</span>;</span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str.<span class="hljs-title function_">split</span>(<span class="hljs-regexp">/[A-z]/</span>)); <span class="hljs-comment">//根据任意的字符串来拆分</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>search()函数的使用</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">     <span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;2h3hu1h4gg14f41fd41hh1i5hih636j221g&quot;</span>;</span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str.<span class="hljs-title function_">search</span>(<span class="hljs-regexp">/4[3231]f/</span>)); <span class="hljs-comment">//   13  查找到出现的位置</span></span><br><span class="language-javascript"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>replace（）函数的使用</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;2h3hu1h4gg14f41fd41hh1i5hih636j221g&quot;</span>;</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> tmp = str.<span class="hljs-title function_">replace</span>(<span class="hljs-number">1</span>,<span class="hljs-string">&quot;ssss&quot;</span>);</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>( tmp); <span class="hljs-comment">// 2h3hussssh4gg14f41fd41hh1i5hih636j221g</span></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>match()函数的使用</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">     <span class="hljs-keyword">var</span> str=<span class="hljs-string">&quot;1 plus 2 equal 3&quot;</span>;</span><br><span class="language-javascript">     <span class="hljs-keyword">var</span> ret= str.<span class="hljs-title function_">match</span>(<span class="hljs-regexp">/\d/g</span>);</span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(ret);<span class="hljs-comment">// 1 2 3array</span></span><br><span class="language-javascript"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>量词</strong><br>通过量词可以设置一个内容出现的次数<br>量词只对它前边的一个内容起作用<br>{n} 正好出现n次<br>{m,n} 出现mn次<br>{m,} m次以上</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/a&#123;3&#125;/g</span>;</span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;asdadadaaaaddda&quot;</span>;</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(str));<span class="hljs-comment">//true</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;str&quot;</span>));<span class="hljs-comment">//false;</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>	<br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/a&#123;1,3&#125;/g</span>;</span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;asdadadaaaaddda&quot;</span>;</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(str));<span class="hljs-comment">//true</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;stra&quot;</span>));<span class="hljs-comment">//true;</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/a&#123;13,&#125;/g</span>;</span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;asdadadaaaaddda&quot;</span>;</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(str));<span class="hljs-comment">//false</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;stra&quot;</span>));<span class="hljs-comment">//false;</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>+至少一个，相当于{1,}<br>*个或多个，相当于{0,}<br>? 0个或1个，相当于{0,1}</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;dasdad  dads da dad adad&quot;</span>;</span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> tmp = str.<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/\s*/g</span>,<span class="hljs-string">&quot;&quot;</span>);</span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp);<span class="hljs-comment">//dasdaddadsdadadadad</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>边界表达式</strong>（不要在java中用，javaScript中用）<br>^:正则开始<br>$:正则结束 ：<strong>注意结束前一个才是结束匹配</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- // 邮件的正则表达式练习 --&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/\w&#123;3,&#125;(\. \w+)*@[A-z0-9]+(\.[A-z&#123;2,5&#125;])&#123;1,2&#125;/</span>;</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> email = <span class="hljs-string">&quot;2499954371@qq.com&quot;</span>;</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(email));<span class="hljs-comment">//true</span></span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reg.<span class="hljs-title function_">test</span>(<span class="hljs-string">&quot;dad.dsa@aa.dsda&quot;</span>));<span class="hljs-comment">//true</span></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>方法：</strong></p>
<p>test()<br>可以用来检查一个字符串是否符合正则表达式<br>如果符合返回true，否则返回false<br>例子</p>
<p>去掉两端的空格:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">          <span class="hljs-keyword">var</span> s = <span class="hljs-string">&quot;        	f    afa    &quot;</span>;   </span><br><span class="language-javascript">          s = s.<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/^\s*|\s*$/g</span>,<span class="hljs-string">&quot;&quot;</span>);</span><br><span class="language-javascript">          <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(s);<span class="hljs-comment">//f    afa</span></span><br><span class="language-javascript">     </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="8-DOM-文档对象模型-Document-Object-Model"><a href="#8-DOM-文档对象模型-Document-Object-Model" class="headerlink" title="8. DOM 文档对象模型(Document Object Model)"></a>8. DOM 文档对象模型(Document Object Model)</h3><p>文档对象模型，通过DOM可以来任意来修改网页中各个内容<br>文档 :  文档指的是网页，一个网页就是一个文档<br>对象 : 对象指将网页中的每一个节点都转换为对象, 转换完对象以后，就可以以一种纯面向对象的形式来操作网页了<br>模型:模型用来表示节点和节点之间的关系，方便操作页面<br>节点（Node）:节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点。虽然都是节点，但是节点的类型却是不同的</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs web-idl">常用的节点：<br><br>1. 文档节点 （Document），代表整个网页<br>2. 元素节点（Element），代表网页中的标签<br>3. 属性节点（Attribute），代表标签中的属性<br>4. 文本节点（Text），代表网页中的文本内容<br></code></pre></td></tr></table></figure>

<p><img src="C:\Users\hasee\AppData\Roaming\Typora\typora-user-images\image-20220319161659485.png" alt="image-20220319161659485"></p>
<p>大致结构图如上图所示：</p>
<h4 id="8-1DOM操作"><a href="#8-1DOM操作" class="headerlink" title="8.1DOM操作"></a>8.1DOM操作</h4><p>DOM查询：在网页中浏览器已经为我们提供了<strong>document对象</strong>，<br><strong>它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs html">document查询方法：<br>1.根据元素的id属性查询一个元素节点对象： document.getElementById(“id属性值”);<br>2.根据元素的name属性值查询一组元素节点对象:document.getElementsByName(“name属性值”);<br>3.根据标签名来查询一组元素节点对象：document.getElementsByTagName(“标签名”);<br></code></pre></td></tr></table></figure>

<p>浏览器已经为我们提供了文档节点，对象这个对象是window属性，可以在网页中直接使用，文档节点代表整个网页。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span> =<span class="hljs-string">&quot;btn&quot;</span>&gt;</span>我是个按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> btn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;btn&quot;</span>);</span><br><span class="language-javascript">        btn.<span class="hljs-property">innerHTML</span> = <span class="hljs-string">&quot;我改变了这个名字&quot;</span>;</span><br><span class="language-javascript">        btn.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我被点击了&quot;</span>);</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>读取元素的属性：</strong><br>语法：元素.属性名<br>例子：ele.name  ele.id ele.value  ele.className<br>注意：class属性不能采用这种方式，<br><strong>读取class属性时需要使用 元素.classNam</strong>e</p>
<p>修改元素的属性：<br>语法：元素.属性名 &#x3D; 属性值</p>
<p>innerHTML<br>使用该属性可以获取或设置元素内部的HTML代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span> = <span class="hljs-string">&quot;btn&quot;</span> <span class="hljs-attr">id</span> =<span class="hljs-string">&quot;btn&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;值&quot;</span>&gt;</span>我是个按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> btn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;btn&quot;</span>);</span><br><span class="language-javascript">        btn.<span class="hljs-property">innerHTML</span> = <span class="hljs-string">&quot;我改变了这个名字&quot;</span>;</span><br><span class="language-javascript">        btn.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(btn.<span class="hljs-property">className</span>  + <span class="hljs-string">&quot;id:&quot;</span>+btn.<span class="hljs-property">id</span> ); </span><br><span class="language-javascript">        &#125; <span class="hljs-comment">//btnid:btn</span></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="8-2事件（Event）"><a href="#8-2事件（Event）" class="headerlink" title="8.2事件（Event）"></a>8.2事件（Event）</h4><p>事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动。。。<br>我们可以为事件来绑定回调函数来响应事件。</p>
<p>绑定事件的方式：<br>1.可以在标签的事件属性中设置相应的JS代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span> = <span class="hljs-string">&quot;btn&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;alert(&#x27;我被点击了&#x27;)&quot;</span>&gt;</span> 按钮 <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>2.可以通过为对象的指定事件属性设置回调函数的形式来处理事件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span> = <span class="hljs-string">&quot;btn&quot;</span> &gt;</span> 按钮 <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> btn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;btn&quot;</span>);</span><br><span class="language-javascript">        btn.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我被点了&quot;</span>);</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>文档的加载</strong><br>浏览器在加载一个页面时，是按照自上向下的顺序加载的，加载一行执行一行。<br>如果将js代码编写到页面的上边，当代码执行时，页面中的DOM对象还没有加载，<br>此时将会无法正常获取到DOM对象，导致DOM操作失败。</p>
<p>解决方式一：可以将js代码编写到body的下边</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span> = <span class="hljs-string">&quot;btn&quot;</span> &gt;</span> 按钮 <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> btn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;btn&quot;</span>);</span><br><span class="language-javascript">        btn.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我被点了&quot;</span>);</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>解决方式二：将js代码编写到window.onload &#x3D; function(){}中 , window.onload 对应的回调函数会在整个页面加载完毕以后才执行，<br>所以可以确保代码执行时，DOM对象已经加载完毕了.</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>  <br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> btn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;btn&quot;</span>);</span><br><span class="language-javascript">             btn.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我被点了&quot;</span>);</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span> = <span class="hljs-string">&quot;btn&quot;</span> &gt;</span> 按钮 <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="8-3DOM查询"><a href="#8-3DOM查询" class="headerlink" title="8.3DOM查询"></a>8.3DOM查询</h4><p>通过具体的元素节点来查询<br>元素.getElementsByTagName()<br>通过标签名查询当前元素的指定后代元素</p>
<p><strong>子节点包括便签元素中的文本，子元素自包含标签元素</strong></p>
<p>元素.childNodes<br>获取当前元素的<strong>所有子节点</strong><br><strong>会获取到空白的文本子节点</strong></p>
<p>childNodes属性会获取包括文本节点在呢的所有节点<br>根据DOM标签标签间空白也会当成文本节点<br>注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，<br>所以该属性在IE8中会返回4个子元素而其他浏览器是9个</p>
<p>元素.children : 获取当前元素的<strong>所有子元素</strong></p>
<p>元素.firstChild :  获取当前元素的<strong>第一个子节点</strong>，会获取到空白的文本子节点</p>
<p>元素.lastChild : 获取当前元素的<strong>最后一个子节点</strong></p>
<p>元素.parentNode : 获取当前元素的父元素</p>
<p>元素.previousSibling : 获取当前元素的前一个兄弟节点</p>
<p>previousElementSibling : 获取前一个兄弟元素，IE8及以下不支持</p>
<p>元素.nextSibling :  获取当前元素的后一个兄弟节点</p>
<p>firstElementChild : 获取当前元素的第一个子元素<br>firstElementChild不支持IE8及以下的浏览器，<br>如果需要兼容他们尽量不要使用</p>
<p>innerHTML和innerText<br>这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性<br>两个属性作用类似，都可以获取到标签内部的内容，<br><strong>不同是innerHTML会获取到html标签，而innerText会自动去除标签</strong><br>如果使用这两个属性来设置标签内部的内容时，没有任何区别的</p>
<p><strong>读取标签内部的文本内容</strong></p>
<p>h1中的文本内容</p>
<p>元素.firstChild.nodeValue</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!dom查询的练习<span class="hljs-string">&quot;&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">&lt;html&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">	&lt;head&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">		&lt;meta http-equiv=&quot;</span>Content-Type<span class="hljs-string">&quot; content=&quot;</span>text/html; <span class="hljs-keyword">charset</span>=UTF-8<span class="hljs-string">&quot;&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">		&lt;title&gt;Untitled Document&lt;/title&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">		&lt;link rel=&quot;</span>stylesheet<span class="hljs-string">&quot; type=&quot;</span>text/css<span class="hljs-string">&quot; href=&quot;</span>style/css.css<span class="hljs-string">&quot; /&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">		&lt;script type=&quot;</span>text/javascript<span class="hljs-string">&quot;&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">		</span></span><br><span class="hljs-string"><span class="hljs-meta">			window.onload = function()&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">				</span></span><br><span class="hljs-string"><span class="hljs-meta">				</span></span><br><span class="hljs-string"><span class="hljs-meta">				// var btn01 = document.getElementById(&quot;</span>btn01<span class="hljs-string">&quot;);</span></span><br><span class="hljs-string"><span class="hljs-meta">				// btn01.onclick = function()&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">				// 	var libj = document.getElementById(&quot;</span>bj<span class="hljs-string">&quot;);</span></span><br><span class="hljs-string"><span class="hljs-meta">				// 	alert(libj.innerText);</span></span><br><span class="hljs-string"><span class="hljs-meta">				// &#125;</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">				function findNodeBtn(idstr,func)</span></span><br><span class="hljs-string"><span class="hljs-meta">				&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">					var btn01 = document.getElementById(idstr);</span></span><br><span class="hljs-string"><span class="hljs-meta">					btn01.onclick = func;</span></span><br><span class="hljs-string"><span class="hljs-meta">				&#125;</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">				//查找#bj节点</span></span><br><span class="hljs-string"><span class="hljs-meta">				findNodeBtn(&quot;</span>btn01<span class="hljs-string">&quot;,function()&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">					var bjli = document.getElementById(&quot;</span>bj<span class="hljs-string">&quot;);</span></span><br><span class="hljs-string"><span class="hljs-meta">					alert(bjli.innerHTML);</span></span><br><span class="hljs-string"><span class="hljs-meta">				&#125;);</span></span><br><span class="hljs-string"><span class="hljs-meta">					</span></span><br><span class="hljs-string"><span class="hljs-meta">				//查找所有li节点</span></span><br><span class="hljs-string"><span class="hljs-meta">				findNodeBtn(&quot;</span>btn02<span class="hljs-string">&quot;,function()&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">					var lis = document.getElementsByTagName(&quot;</span>li<span class="hljs-string">&quot;);</span></span><br><span class="hljs-string"><span class="hljs-meta">					for(var i = 0; i &lt;lis.length;i++)</span></span><br><span class="hljs-string"><span class="hljs-meta">					&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">						alert(lis[i].innerText);</span></span><br><span class="hljs-string"><span class="hljs-meta">					&#125;</span></span><br><span class="hljs-string"><span class="hljs-meta">					alert(lis);</span></span><br><span class="hljs-string"><span class="hljs-meta">				&#125;);</span></span><br><span class="hljs-string"><span class="hljs-meta">				</span></span><br><span class="hljs-string"><span class="hljs-meta">				//查找name=gender的所有节点</span></span><br><span class="hljs-string"><span class="hljs-meta">				findNodeBtn(&quot;</span>btn03<span class="hljs-string">&quot;,function()&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">					var ganders = document.getElementsByName(&quot;</span>gender<span class="hljs-string">&quot;);</span></span><br><span class="hljs-string"><span class="hljs-meta">					for(var i = 0; i &lt; ganders.length;i++)</span></span><br><span class="hljs-string"><span class="hljs-meta">					&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">						alert(ganders[i].value);</span></span><br><span class="hljs-string"><span class="hljs-meta">					&#125;</span></span><br><span class="hljs-string"><span class="hljs-meta">				&#125;);</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">				//查找#city下所有li节点</span></span><br><span class="hljs-string"><span class="hljs-meta">				findNodeBtn(&quot;</span>btn04<span class="hljs-string">&quot;,function()&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">					var city = document.getElementById(&quot;</span>city<span class="hljs-string">&quot;);</span></span><br><span class="hljs-string"><span class="hljs-meta">					var lis = city.getElementsByTagName(&quot;</span>li<span class="hljs-string">&quot;);</span></span><br><span class="hljs-string"><span class="hljs-meta">					for(var i = 0; i &lt;lis.length;i++)</span></span><br><span class="hljs-string"><span class="hljs-meta">					&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">						alert(lis[i].innerText);</span></span><br><span class="hljs-string"><span class="hljs-meta">					&#125;</span></span><br><span class="hljs-string"><span class="hljs-meta">				&#125;);</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">				//返回#city的所有子节点</span></span><br><span class="hljs-string"><span class="hljs-meta">				findNodeBtn(&quot;</span>btn05<span class="hljs-string">&quot;,function()&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">					var city = document.getElementById(&quot;</span>city<span class="hljs-string">&quot;);</span></span><br><span class="hljs-string"><span class="hljs-meta">					// var chlids = city.childNodes; 会有子标签</span></span><br><span class="hljs-string"><span class="hljs-meta">					var chlids = city.children;</span></span><br><span class="hljs-string"><span class="hljs-meta">					for(var i = 0; i &lt;chlids.length;i++)</span></span><br><span class="hljs-string"><span class="hljs-meta">					&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">						alert(chlids[i].innerText);</span></span><br><span class="hljs-string"><span class="hljs-meta">					&#125;</span></span><br><span class="hljs-string"><span class="hljs-meta">				&#125;);</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">				//返回#phone的第一个子节点</span></span><br><span class="hljs-string"><span class="hljs-meta">				findNodeBtn(&quot;</span>btn06<span class="hljs-string">&quot;,function()&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">					var phone = document.getElementById(&quot;</span>phone<span class="hljs-string">&quot;);</span></span><br><span class="hljs-string"><span class="hljs-meta">					var firschild = phone.firstChild; </span></span><br><span class="hljs-string"><span class="hljs-meta">					// var firschild = phone.firstElementChild;  ie8下不兼容</span></span><br><span class="hljs-string"><span class="hljs-meta">					alert(firschild.innerText);</span></span><br><span class="hljs-string"><span class="hljs-meta">				&#125;);</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">				//返回#bj的父节点</span></span><br><span class="hljs-string"><span class="hljs-meta">				findNodeBtn(&quot;</span>btn07<span class="hljs-string">&quot;,function()&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">					var bj = document.getElementById(&quot;</span>bj<span class="hljs-string">&quot;);</span></span><br><span class="hljs-string"><span class="hljs-meta">					var parentNode = bj.parentNode;</span></span><br><span class="hljs-string"><span class="hljs-meta">					// var parentNode = bj.parentElement; ie8下不兼容</span></span><br><span class="hljs-string"><span class="hljs-meta">					alert(parentNode.innerText);</span></span><br><span class="hljs-string"><span class="hljs-meta">				&#125;);</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">				//返回#android的前一个兄弟节点</span></span><br><span class="hljs-string"><span class="hljs-meta">				findNodeBtn(&quot;</span>btn08<span class="hljs-string">&quot;,function()&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">					var bro = document.getElementById(&quot;</span>android<span class="hljs-string">&quot;);</span></span><br><span class="hljs-string"><span class="hljs-meta">					// var node = bro.previousElementSibling;  //前一个节点</span></span><br><span class="hljs-string"><span class="hljs-meta">					// alert(node.innerHTML);</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">					var node = bro.nextElementSibling; //后一个节点</span></span><br><span class="hljs-string"><span class="hljs-meta">					alert(node.innerHTML);</span></span><br><span class="hljs-string"><span class="hljs-meta">				&#125;);</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">				//读取#username的value属性值</span></span><br><span class="hljs-string"><span class="hljs-meta">				findNodeBtn(&quot;</span>btn09<span class="hljs-string">&quot;,function()&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">					var bro = document.getElementById(&quot;</span>username<span class="hljs-string">&quot;);</span></span><br><span class="hljs-string"><span class="hljs-meta">					alert(bro.value);</span></span><br><span class="hljs-string"><span class="hljs-meta">				&#125;);</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">				//设置#username的value属性值</span></span><br><span class="hljs-string"><span class="hljs-meta">				findNodeBtn(&quot;</span>btn10<span class="hljs-string">&quot;,function()&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">					var bro = document.getElementById(&quot;</span>username<span class="hljs-string">&quot;);</span></span><br><span class="hljs-string"><span class="hljs-meta">					bro.value = &quot;</span>该百年迟早<span class="hljs-string">&quot;</span></span><br><span class="hljs-string"><span class="hljs-meta">				&#125;);</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">				//返回#bj的文本值</span></span><br><span class="hljs-string"><span class="hljs-meta">				findNodeBtn(&quot;</span>btn11<span class="hljs-string">&quot;,function()&#123;</span></span><br><span class="hljs-string"><span class="hljs-meta">					var bro = document.getElementById(&quot;</span>bj<span class="hljs-string">&quot;);</span></span><br><span class="hljs-string"><span class="hljs-meta">					alert(bro.innerText);</span></span><br><span class="hljs-string"><span class="hljs-meta">				&#125;);</span></span><br><span class="hljs-string"><span class="hljs-meta">			&#125;;</span></span><br><span class="hljs-string"><span class="hljs-meta">			</span></span><br><span class="hljs-string"><span class="hljs-meta">		</span></span><br><span class="hljs-string"><span class="hljs-meta">		&lt;/script&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">	&lt;/head&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">	&lt;body&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">		&lt;div id=&quot;</span>total<span class="hljs-string">&quot;&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">			&lt;div class=&quot;</span>inner<span class="hljs-string">&quot;&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;p&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">					你喜欢哪个城市?</span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;/p&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;ul id=&quot;</span>city<span class="hljs-string">&quot;&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">					&lt;li id=&quot;</span>bj<span class="hljs-string">&quot;&gt;北京&lt;/li&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">					&lt;li&gt;上海&lt;/li&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">					&lt;li&gt;东京&lt;/li&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">					&lt;li&gt;首尔&lt;/li&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;/ul&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;br&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;br&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;p&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">					你喜欢哪款单机游戏?</span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;/p&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;ul id=&quot;</span>game<span class="hljs-string">&quot;&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">					&lt;li id=&quot;</span>rl<span class="hljs-string">&quot;&gt;红警&lt;/li&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">					&lt;li&gt;实况&lt;/li&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">					&lt;li&gt;极品飞车&lt;/li&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">					&lt;li&gt;魔兽&lt;/li&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;/ul&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;br /&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;br /&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;p&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">					你手机的操作系统是?</span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;/p&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;ul id=&quot;</span>phone<span class="hljs-string">&quot;&gt;&lt;li&gt;IOS&lt;/li&gt;&lt;li id=&quot;</span>android<span class="hljs-string">&quot;&gt;Android&lt;/li&gt;&lt;li&gt;Windows Phone&lt;/li&gt;&lt;/ul&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">			&lt;/div&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br><span class="hljs-string"><span class="hljs-meta">			&lt;div class=&quot;</span>inner<span class="hljs-string">&quot;&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">				gender:</span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;input class=&quot;</span>hello<span class="hljs-string">&quot; type=&quot;</span>radio<span class="hljs-string">&quot; name=&quot;</span>gender<span class="hljs-string">&quot; value=&quot;</span>male<span class="hljs-string">&quot;/&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">				Male</span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;input class=&quot;</span>hello<span class="hljs-string">&quot; type=&quot;</span>radio<span class="hljs-string">&quot; name=&quot;</span>gender<span class="hljs-string">&quot; value=&quot;</span>female<span class="hljs-string">&quot;/&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">				Female</span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;br&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;br&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">				name:</span></span><br><span class="hljs-string"><span class="hljs-meta">				&lt;input type=&quot;</span>text<span class="hljs-string">&quot; name=&quot;</span>name<span class="hljs-string">&quot; id=&quot;</span>username<span class="hljs-string">&quot; value=&quot;</span>abcde<span class="hljs-string">&quot;/&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">			&lt;/div&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">		&lt;/div&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">		&lt;div id=&quot;</span>btnList<span class="hljs-string">&quot;&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">			&lt;div&gt;&lt;button id=&quot;</span>btn01<span class="hljs-string">&quot;&gt;查找#bj节点&lt;/button&gt;&lt;/div&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">			&lt;div&gt;&lt;button id=&quot;</span>btn02<span class="hljs-string">&quot;&gt;查找所有li节点&lt;/button&gt;&lt;/div&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">			&lt;div&gt;&lt;button id=&quot;</span>btn03<span class="hljs-string">&quot;&gt;查找name=gender的所有节点&lt;/button&gt;&lt;/div&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">			&lt;div&gt;&lt;button id=&quot;</span>btn04<span class="hljs-string">&quot;&gt;查找#city下所有li节点&lt;/button&gt;&lt;/div&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">			&lt;div&gt;&lt;button id=&quot;</span>btn05<span class="hljs-string">&quot;&gt;返回#city的所有子节点&lt;/button&gt;&lt;/div&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">			&lt;div&gt;&lt;button id=&quot;</span>btn06<span class="hljs-string">&quot;&gt;返回#phone的第一个子节点&lt;/button&gt;&lt;/div&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">			&lt;div&gt;&lt;button id=&quot;</span>btn07<span class="hljs-string">&quot;&gt;返回#bj的父节点&lt;/button&gt;&lt;/div&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">			&lt;div&gt;&lt;button id=&quot;</span>btn08<span class="hljs-string">&quot;&gt;返回#android的前一个兄弟节点&lt;/button&gt;&lt;/div&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">			&lt;div&gt;&lt;button id=&quot;</span>btn09<span class="hljs-string">&quot;&gt;返回#username的value属性值&lt;/button&gt;&lt;/div&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">			&lt;div&gt;&lt;button id=&quot;</span>btn10<span class="hljs-string">&quot;&gt;设置#username的value属性值&lt;/button&gt;&lt;/div&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">			&lt;div&gt;&lt;button id=&quot;</span>btn11<span class="hljs-string">&quot;&gt;返回#bj的文本值&lt;/button&gt;&lt;/div&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">		&lt;/div&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">	&lt;/body&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta">&lt;/html&gt;</span></span><br><span class="hljs-string"><span class="hljs-meta"></span></span><br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><code class="hljs html">//按钮换图片功能的实现<br><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        *&#123;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.inner</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto;</span><br><span class="language-css">            <span class="hljs-attribute">text-align</span>: center;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: greenyellow;</span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> arrAdress = [<span class="hljs-string">&quot;./img/1.jpg&quot;</span>,<span class="hljs-string">&quot;./img/2.jpg&quot;</span>,<span class="hljs-string">&quot;./img/3.jpg&quot;</span>,<span class="hljs-string">&quot;./img/4.jpg&quot;</span>,<span class="hljs-string">&quot;./img/5.jpg&quot;</span>];</span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> prev = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;prev&quot;</span>);</span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> next = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;next&quot;</span>);</span><br><span class="language-javascript">            <span class="hljs-comment">// var img = document.getElementsByTagName(&quot;img&quot;)[0];</span></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> img = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;imgs&quot;</span>);</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> index = <span class="hljs-number">0</span>;</span><br><span class="language-javascript">            prev.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">                index--;</span><br><span class="language-javascript">                <span class="hljs-keyword">if</span>(index &lt; <span class="hljs-number">0</span>)</span><br><span class="language-javascript">                &#123;</span><br><span class="language-javascript">                    index = <span class="hljs-number">4</span>;</span><br><span class="language-javascript">                &#125;</span><br><span class="language-javascript">                img.<span class="hljs-property">src</span> = arrAdress[index];</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">            next.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">                index++;</span><br><span class="language-javascript">                <span class="hljs-keyword">if</span>(index &gt; <span class="hljs-number">4</span>)</span><br><span class="language-javascript">                &#123;</span><br><span class="language-javascript">                    index = <span class="hljs-number">0</span>;</span><br><span class="language-javascript">                &#125;</span><br><span class="language-javascript">                img.<span class="hljs-property">src</span> = arrAdress[index];</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;inner&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./img/1.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;图片的资源不够&quot;</span> <span class="hljs-attr">id</span> = <span class="hljs-string">&quot;imgs&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;prev&quot;</span>&gt;</span>上一张<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span> = <span class="hljs-string">&quot;next&quot;</span>&gt;</span>下一张<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br></pre></td><td class="code"><pre><code class="hljs html">//标签按钮功能的实现<br><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;Content-Type&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;text/html; charset=UTF-8&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>全选练习<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript"></span><br><span class="language-javascript">	<span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">		</span><br><span class="language-javascript">		</span><br><span class="language-javascript">		<span class="hljs-comment">//获取四个多选框items</span></span><br><span class="language-javascript">		<span class="hljs-keyword">var</span> items = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByName</span>(<span class="hljs-string">&quot;items&quot;</span>);</span><br><span class="language-javascript">		<span class="hljs-comment">//获取全选/全不选的多选框</span></span><br><span class="language-javascript">		<span class="hljs-keyword">var</span> checkedAllBox = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;checkedAllBox&quot;</span>);</span><br><span class="language-javascript">		</span><br><span class="language-javascript">		<span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">		 * 全选按钮</span></span><br><span class="hljs-comment"><span class="language-javascript">		 * 	- 点击按钮以后，四个多选框全都被选中</span></span><br><span class="hljs-comment"><span class="language-javascript">		 */</span></span><br><span class="language-javascript">		</span><br><span class="language-javascript">		<span class="hljs-comment">//1.#checkedAllBtn</span></span><br><span class="language-javascript">		 <span class="hljs-keyword">var</span> checkedAllBtn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;checkedAllBtn&quot;</span>);</span><br><span class="language-javascript">		 checkedAllBtn.<span class="hljs-property">onclick</span>=<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">			<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i&lt; items.<span class="hljs-property">length</span>;i++)</span><br><span class="language-javascript">			&#123;</span><br><span class="language-javascript">				items[i].<span class="hljs-property">checked</span> = <span class="hljs-literal">true</span>;</span><br><span class="language-javascript">			&#125;</span><br><span class="language-javascript">			checkedAllBox.<span class="hljs-property">checked</span> = <span class="hljs-literal">true</span>;</span><br><span class="language-javascript">		 &#125;</span><br><span class="language-javascript">		</span><br><span class="language-javascript">		<span class="hljs-comment">//2.#checkedNoBtn</span></span><br><span class="language-javascript">		<span class="hljs-keyword">var</span> checkedNoBtn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;checkedNoBtn&quot;</span>);</span><br><span class="language-javascript">		checkedNoBtn.<span class="hljs-property">onclick</span>=<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">			<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i&lt; items.<span class="hljs-property">length</span>;i++)</span><br><span class="language-javascript">			&#123;</span><br><span class="language-javascript">				items[i].<span class="hljs-property">checked</span> = <span class="hljs-literal">false</span>;</span><br><span class="language-javascript">			&#125;</span><br><span class="language-javascript">			checkedAllBox.<span class="hljs-property">checked</span> = <span class="hljs-literal">false</span>;</span><br><span class="language-javascript">		 &#125;</span><br><span class="language-javascript">		<span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">		 * 反选按钮</span></span><br><span class="hljs-comment"><span class="language-javascript">		 * 	- 点击按钮以后，选中的变成没选中，没选中的变成选中</span></span><br><span class="hljs-comment"><span class="language-javascript">		 */</span></span><br><span class="language-javascript">		<span class="hljs-comment">//3.#checkedRevBtn</span></span><br><span class="language-javascript">		<span class="hljs-keyword">var</span> checkedRevBtn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;checkedRevBtn&quot;</span>);</span><br><span class="language-javascript">		checkedRevBtn.<span class="hljs-property">onclick</span>=<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">			checkedAllBox.<span class="hljs-property">checked</span> = <span class="hljs-literal">true</span>;</span><br><span class="language-javascript">			<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i&lt; items.<span class="hljs-property">length</span>;i++)</span><br><span class="language-javascript">			&#123;</span><br><span class="language-javascript">				items[i].<span class="hljs-property">checked</span> = !items[i].<span class="hljs-property">checked</span>;</span><br><span class="language-javascript">				<span class="hljs-keyword">if</span>(!!items[i].<span class="hljs-property">checked</span>)</span><br><span class="language-javascript">				&#123;</span><br><span class="language-javascript">					checkedAllBox.<span class="hljs-property">checked</span> = <span class="hljs-literal">false</span>;</span><br><span class="language-javascript">				&#125;</span><br><span class="language-javascript">			&#125;</span><br><span class="language-javascript">			</span><br><span class="language-javascript">		 &#125;</span><br><span class="language-javascript">		<span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">		 * 提交按钮：</span></span><br><span class="hljs-comment"><span class="language-javascript">		 * 	- 点击按钮以后，将所有选中的多选框的value属性值弹出</span></span><br><span class="hljs-comment"><span class="language-javascript">		 */</span></span><br><span class="language-javascript">		<span class="hljs-comment">//4.#sendBtn</span></span><br><span class="language-javascript">		<span class="hljs-keyword">var</span> sendBtn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;sendBtn&quot;</span>);</span><br><span class="language-javascript">		sendBtn.<span class="hljs-property">onclick</span>=<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">			<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i&lt; items.<span class="hljs-property">length</span>;i++)</span><br><span class="language-javascript">			&#123;</span><br><span class="language-javascript">				<span class="hljs-keyword">if</span>(items[i].<span class="hljs-property">checked</span>)</span><br><span class="language-javascript">				&#123;</span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(items[i].<span class="hljs-property">value</span>);</span><br><span class="language-javascript">				&#125;</span><br><span class="language-javascript">			&#125;</span><br><span class="language-javascript">			</span><br><span class="language-javascript">		 &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">		<span class="hljs-comment">//5.#checkedAllBox</span></span><br><span class="language-javascript">		<span class="hljs-keyword">var</span> checkedAllBox = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;checkedAllBox&quot;</span>);</span><br><span class="language-javascript">		checkedAllBox.<span class="hljs-property">onclick</span>=<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">			<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i&lt; items.<span class="hljs-property">length</span>;i++)</span><br><span class="language-javascript">			&#123;</span><br><span class="language-javascript">				<span class="hljs-keyword">if</span>(checkedAllBox.<span class="hljs-property">checked</span>)</span><br><span class="language-javascript">				&#123;</span><br><span class="language-javascript">					items[i].<span class="hljs-property">checked</span> = <span class="hljs-literal">true</span>;</span><br><span class="language-javascript">				&#125;</span><br><span class="language-javascript">				<span class="hljs-keyword">else</span>&#123;</span><br><span class="language-javascript">					items[i].<span class="hljs-property">checked</span> = <span class="hljs-literal">false</span>;</span><br><span class="language-javascript">				&#125;</span><br><span class="language-javascript">			&#125;</span><br><span class="language-javascript">			</span><br><span class="language-javascript">		 &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">		<span class="hljs-comment">//6.items</span></span><br><span class="language-javascript">		<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span> ; i&lt; items.<span class="hljs-property">length</span>;i++)&#123;</span><br><span class="language-javascript">			items[i].<span class="hljs-property">onclick</span>=<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				checkedAllBox.<span class="hljs-property">checked</span> = <span class="hljs-literal">true</span>;</span><br><span class="language-javascript">				<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span> ; i&lt; items.<span class="hljs-property">length</span>;i++)</span><br><span class="language-javascript">				&#123;</span><br><span class="language-javascript">					<span class="hljs-keyword">if</span>(!items[i].<span class="hljs-property">checked</span>)</span><br><span class="language-javascript">						&#123;</span><br><span class="language-javascript">							checkedAllBox.<span class="hljs-property">checked</span> = <span class="hljs-literal">false</span>;</span><br><span class="language-javascript">							<span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">						&#125;</span><br><span class="language-javascript">				&#125;</span><br><span class="language-javascript">			&#125;</span><br><span class="language-javascript">		&#125;	</span><br><span class="language-javascript">	&#125;;</span><br><span class="language-javascript">	</span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><br>	<span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;post&quot;</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span><br>		你爱好的运动是？<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;checkedAllBox&quot;</span> /&gt;</span>全选/全不选 <br>		<br>		<span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;items&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;足球&quot;</span> /&gt;</span>足球<br>		<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;items&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;篮球&quot;</span> /&gt;</span>篮球<br>		<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;items&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;羽毛球&quot;</span> /&gt;</span>羽毛球<br>		<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;items&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;乒乓球&quot;</span> /&gt;</span>乒乓球<br>		<span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;checkedAllBtn&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;全　选&quot;</span> /&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;checkedNoBtn&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;全不选&quot;</span> /&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;checkedRevBtn&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;反　选&quot;</span> /&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;sendBtn&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;提　交&quot;</span> /&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="8-4document对象的其他的属性和方法"><a href="#8-4document对象的其他的属性和方法" class="headerlink" title="8.4document对象的其他的属性和方法"></a>8.4document对象的其他的属性和方法</h4><p>document.all：<strong>获取页面中的所有元素</strong>，相当于document.getElementsByTagName(“*”);</p>
<p>document.documentElement : <strong>获取页面中html根元素</strong></p>
<p>document.body: 获取页面中的body元素</p>
<p>document.getElementsByClassName(): <strong>根据元素的class属性值查询一组元素节点对象</strong><br>这个方法不支持IE8及以下的浏览器</p>
<p>document.querySelector() : <strong>根据CSS选择器去页面中查询一个元素</strong>,如果匹配到的元素有多个，则它会返回查询到的第一个元素</p>
<p>document.querySelectorAll() : 根据CSS选择器去页面中查询一组元素, 会将匹配到所有元素封装到一个数组中返回，即使只匹配到一个</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-comment">//获取body标签</span></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> bodylab = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">&quot;body&quot;</span>);  <span class="hljs-comment">//通过标签取获取body</span></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> bodylab1 = <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>;  <span class="hljs-comment">//在document中有一个属性body，它保存的是body的引用</span></span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(bodylab[<span class="hljs-number">0</span>]);</span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(bodylab1);</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-comment">//获取html整体</span></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> html  = <span class="hljs-variable language_">document</span>.<span class="hljs-property">documentElement</span>;</span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(html);</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-comment">//获取所有的标签</span></span><br><span class="language-javascript">            <span class="hljs-comment">// var htmlall= document.all;</span></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> htmlall = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">&quot;*&quot;</span>);  <span class="hljs-comment">//方法二：</span></span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(htmlall.<span class="hljs-property">length</span>);   <span class="hljs-comment">//14</span></span><br><span class="language-javascript">            <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i&lt; htmlall.<span class="hljs-property">length</span>; i++)</span><br><span class="language-javascript">            &#123;</span><br><span class="language-javascript">                <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(htmlall[i].<span class="hljs-property">innerHTML</span>);</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript">          </span><br><span class="language-javascript">            <span class="hljs-comment">// ///*</span></span><br><span class="language-javascript">			<span class="hljs-comment">// 	 * 根据元素的class属性值查询一组元素节点对象</span></span><br><span class="language-javascript">			<span class="hljs-comment">// 	 * getElementsByClassName()可以根据class属性值获取一组元素节点对象，</span></span><br><span class="language-javascript">			<span class="hljs-comment">// 	 * 	但是该方法不支持IE8及以下的浏览器</span></span><br><span class="language-javascript">			<span class="hljs-comment">// 	 */</span></span><br><span class="language-javascript">           <span class="hljs-keyword">var</span> names = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByClassName</span>(<span class="hljs-string">&quot;name&quot;</span>);</span><br><span class="language-javascript">           <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(names.<span class="hljs-property">length</span>);<span class="hljs-comment">//2</span></span><br><span class="language-javascript">           <span class="hljs-keyword">var</span> divs  = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">&quot;div&quot;</span>);</span><br><span class="language-javascript">           <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(divs.<span class="hljs-property">length</span>);<span class="hljs-comment">//5</span></span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-comment">//获取class为name中的所有的div</span></span><br><span class="language-javascript">				<span class="hljs-comment">//.name div</span></span><br><span class="language-javascript">				<span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">				 * document.querySelector()</span></span><br><span class="hljs-comment"><span class="language-javascript">				 * 	- 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象</span></span><br><span class="hljs-comment"><span class="language-javascript">				 * 	- 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替</span></span><br><span class="hljs-comment"><span class="language-javascript">				 * 	- 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个</span></span><br><span class="hljs-comment"><span class="language-javascript">				 */</span></span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> div = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">&quot;name div&quot;</span>);</span><br><span class="language-javascript">				<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(div);<span class="hljs-comment">//</span></span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> box1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">&quot;.name&quot;</span>)</span><br><span class="language-javascript">                <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(box1);<span class="hljs-comment">//</span></span><br><span class="language-javascript"></span><br><span class="language-javascript">                <span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">				 * document.querySelectorAll()</span></span><br><span class="hljs-comment"><span class="language-javascript">				 * 	- 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回</span></span><br><span class="hljs-comment"><span class="language-javascript">				 * 	- 即使符合条件的元素只有一个，它也会返回数组</span></span><br><span class="hljs-comment"><span class="language-javascript">				 */</span></span><br><span class="language-javascript">				box1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">&quot;.name&quot;</span>);</span><br><span class="language-javascript">				<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(box1.<span class="hljs-property">length</span>);<span class="hljs-comment">//4 </span></span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;inner&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span> = <span class="hljs-string">&quot;one&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;oneone&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;name&quot;</span>&gt;</span><br>                    你好<br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span> = <span class="hljs-string">&quot;one&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;name&quot;</span>&gt;</span><br>            ？？？<br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span> = <span class="hljs-string">&quot;one&quot;</span>&gt;</span><br>            three<br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;name&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;name&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="8-5-DOM修改"><a href="#8-5-DOM修改" class="headerlink" title="8.5 DOM修改"></a>8.5 DOM修改</h4><p>document.createElement(“TagName”)<br>可以用于创建一个元素节点对象，<br>它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，<br>并将创建好的对象作为返回值返回<br>document.createTextNode(“textContent”)<br>可以根据文本内容创建一个文本节点对象</p>
<p><strong>父节点.appendChild(子节点)</strong><br>向父节点中添加指定的子节点<br><strong>父节点.insertBefore(新节点,旧节点)</strong><br>将一个新的节点插入到旧节点的前边<br>父节点.replaceChild(新节点,旧节点)<br>使用一个新的节点去替换旧节点</p>
<p><strong>父节点.removeChild(子节点)</strong><br>删除指定的子节点<br>推荐方式：<strong>子节点.parentNode.removeChild(子节点)</strong></p>
<p><strong>以上方法，实际就是改变了相应元素（标签）的innerHTML的值。</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/css&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;style/css.css&quot;</span> /&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">		<span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">			<span class="hljs-keyword">function</span> <span class="hljs-title function_">MyClass</span>(<span class="hljs-params">idstr, func</span>)</span><br><span class="language-javascript">			&#123;</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> btn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(idstr);</span><br><span class="language-javascript">				btn.<span class="hljs-property">onclick</span> = func;</span><br><span class="language-javascript">			&#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">			<span class="hljs-comment">// 创建一个&quot;广州&quot;节点,添加到#city下</span></span><br><span class="language-javascript">			<span class="hljs-title class_">MyClass</span>(<span class="hljs-string">&quot;btn01&quot;</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> gz = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">&quot;li&quot;</span>);</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> gztext = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createTextNode</span>(<span class="hljs-string">&quot;广州&quot;</span>);</span><br><span class="language-javascript">				gz.<span class="hljs-title function_">appendChild</span>(gztext);</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> city = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;city&quot;</span>);	</span><br><span class="language-javascript">				city.<span class="hljs-title function_">appendChild</span>(gz);</span><br><span class="language-javascript">			&#125;);</span><br><span class="language-javascript">			</span><br><span class="language-javascript">			<span class="hljs-comment">//将&quot;广州&quot;节点插入到#bj前面</span></span><br><span class="language-javascript">			<span class="hljs-title class_">MyClass</span>(<span class="hljs-string">&quot;btn02&quot;</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> gz = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">&quot;li&quot;</span>);</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> gztext = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createTextNode</span>(<span class="hljs-string">&quot;广州&quot;</span>);</span><br><span class="language-javascript">				gz.<span class="hljs-title function_">appendChild</span>(gztext);</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> city = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;city&quot;</span>);	</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> bj = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;bj&quot;</span>);</span><br><span class="language-javascript">				city.<span class="hljs-title function_">insertBefore</span>(gz,bj);</span><br><span class="language-javascript">			&#125;);</span><br><span class="language-javascript"></span><br><span class="language-javascript">			<span class="hljs-comment">//使用&quot;广州&quot;节点替换#bj节点replaceChild</span></span><br><span class="language-javascript">			<span class="hljs-title class_">MyClass</span>(<span class="hljs-string">&quot;btn03&quot;</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> gz = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">&quot;li&quot;</span>);</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> gztext = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createTextNode</span>(<span class="hljs-string">&quot;广州&quot;</span>);</span><br><span class="language-javascript">				gz.<span class="hljs-title function_">appendChild</span>(gztext);</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> city = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;city&quot;</span>);	</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> bj = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;bj&quot;</span>);</span><br><span class="language-javascript">				city.<span class="hljs-title function_">replaceChild</span>(gz,bj);</span><br><span class="language-javascript">			&#125;);</span><br><span class="language-javascript"></span><br><span class="language-javascript">			<span class="hljs-comment">//删除#bj节点removeChild</span></span><br><span class="language-javascript">			<span class="hljs-title class_">MyClass</span>(<span class="hljs-string">&quot;btn04&quot;</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> city = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;city&quot;</span>);	</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> bj = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;bj&quot;</span>);</span><br><span class="language-javascript">				city.<span class="hljs-title function_">removeChild</span>(bj);</span><br><span class="language-javascript">			&#125;);</span><br><span class="language-javascript"></span><br><span class="language-javascript">			<span class="hljs-comment">//读取#city内的HTML代码</span></span><br><span class="language-javascript">			<span class="hljs-title class_">MyClass</span>(<span class="hljs-string">&quot;btn05&quot;</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> city = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;city&quot;</span>);	</span><br><span class="language-javascript">				<span class="hljs-title function_">alert</span>(city.<span class="hljs-property">innerHTML</span>);</span><br><span class="language-javascript">			&#125;);</span><br><span class="language-javascript"></span><br><span class="language-javascript">			<span class="hljs-comment">// 设置#bj内的HTML代码</span></span><br><span class="language-javascript">			<span class="hljs-title class_">MyClass</span>(<span class="hljs-string">&quot;btn06&quot;</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> bj = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;bj&quot;</span>);	</span><br><span class="language-javascript">				bj.<span class="hljs-property">innerHTML</span> = <span class="hljs-string">&quot;长沙&quot;</span></span><br><span class="language-javascript">			&#125;);</span><br><span class="language-javascript"></span><br><span class="language-javascript">			<span class="hljs-comment">//创建一个&quot;广州&quot;节点,添加到#city下</span></span><br><span class="language-javascript">			<span class="hljs-title class_">MyClass</span>(<span class="hljs-string">&quot;btn07&quot;</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> city = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;city&quot;</span>);	</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> gz = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">&quot;li&quot;</span>);</span><br><span class="language-javascript">				gz.<span class="hljs-property">innerText</span> = <span class="hljs-string">&quot;广州&quot;</span></span><br><span class="language-javascript">				city.<span class="hljs-title function_">appendChild</span>(gz);</span><br><span class="language-javascript">			&#125;);</span><br><span class="language-javascript">		&#125;</span><br><span class="language-javascript">	</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;total&quot;</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;inner&quot;</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span><br>					你喜欢哪个城市?<br>				<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><br>				<span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;city&quot;</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;bj&quot;</span>&gt;</span>北京<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>上海<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>东京<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>首尔<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>				<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>				<br>			<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>		<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btnList&quot;</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn01&quot;</span>&gt;</span>创建一个&quot;广州&quot;节点,添加到#city下<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn02&quot;</span>&gt;</span>将&quot;广州&quot;节点插入到#bj前面<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn03&quot;</span>&gt;</span>使用&quot;广州&quot;节点替换#bj节点<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn04&quot;</span>&gt;</span>删除#bj节点<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn05&quot;</span>&gt;</span>读取#city内的HTML代码<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn06&quot;</span>&gt;</span>设置#bj内的HTML代码<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn07&quot;</span>&gt;</span>创建一个&quot;广州&quot;节点,添加到#city下<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>		<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>practice</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/css&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;ex_2_style/css.css&quot;</span> /&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">delA</span>(<span class="hljs-params"></span>) &#123;</span><br><span class="language-javascript">                    <span class="hljs-keyword">var</span> tr = <span class="hljs-variable language_">this</span>.<span class="hljs-property">parentNode</span>.<span class="hljs-property">parentNode</span>; <span class="hljs-comment">//表格的上级的上级删除上级</span></span><br><span class="language-javascript">                <span class="hljs-keyword">var</span> name = tr.<span class="hljs-property">children</span>[<span class="hljs-number">0</span>].<span class="hljs-property">innerHTML</span>; <span class="hljs-comment">//获取名字</span></span><br><span class="language-javascript"></span><br><span class="language-javascript">                <span class="hljs-keyword">var</span> flag = <span class="hljs-title function_">confirm</span>(<span class="hljs-string">&quot;确认删除&quot;</span> + name + <span class="hljs-string">&quot;吗?&quot;</span>);</span><br><span class="language-javascript">                <span class="hljs-keyword">if</span>(flag) &#123;</span><br><span class="language-javascript">                    tr.<span class="hljs-property">parentNode</span>.<span class="hljs-title function_">removeChild</span>(tr);</span><br><span class="language-javascript">                &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">                <span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">                * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，</span></span><br><span class="hljs-comment"><span class="language-javascript">                * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为</span></span><br><span class="hljs-comment"><span class="language-javascript">                */</span></span><br><span class="language-javascript">                <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;</span><br><span class="language-javascript">                &#125;;</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-comment">//获取所有的超链接</span></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> <span class="hljs-keyword">as</span>  = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">&quot;a&quot;</span>);</span><br><span class="language-javascript">            <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span> ; i&lt; <span class="hljs-keyword">as</span>.<span class="hljs-property">length</span>;i++)</span><br><span class="language-javascript">            &#123;</span><br><span class="language-javascript">                <span class="hljs-keyword">as</span>[i].<span class="hljs-property">onclick</span> = delA;</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> bbtn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;addEmpButton&quot;</span>);</span><br><span class="language-javascript">            bbtn.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">                  </span><br><span class="language-javascript">                <span class="hljs-comment">//增加员工的操作</span></span><br><span class="language-javascript">                <span class="hljs-keyword">var</span> name = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;empName&quot;</span>).<span class="hljs-property">value</span>;</span><br><span class="language-javascript">                <span class="hljs-keyword">var</span> email = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;email&quot;</span>).<span class="hljs-property">value</span>;</span><br><span class="language-javascript">                <span class="hljs-keyword">var</span> salary = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;salary&quot;</span>).<span class="hljs-property">value</span>;</span><br><span class="language-javascript"></span><br><span class="language-javascript">                <span class="hljs-keyword">var</span> tr = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">&quot;tr&quot;</span>);</span><br><span class="language-javascript">                tr.<span class="hljs-property">innerHTML</span> = <span class="hljs-string">&quot;&lt;td&gt;&quot;</span> +name +<span class="hljs-string">&quot;&lt;/td&gt;&quot;</span>+</span><br><span class="language-javascript">                <span class="hljs-string">&quot;&lt;td&gt;&quot;</span> +email +<span class="hljs-string">&quot;&lt;/td&gt;&quot;</span>+</span><br><span class="language-javascript">                <span class="hljs-string">&quot;&lt;td&gt;&quot;</span> +salary +<span class="hljs-string">&quot;&lt;/td&gt;&quot;</span>+</span><br><span class="language-javascript">                <span class="hljs-string">&quot;&lt;td&gt;&quot;</span> +<span class="hljs-string">&quot;&lt;a href=&#x27;javascript:;&#x27;&gt;Delete&lt;/a&gt;&quot;</span> +<span class="hljs-string">&quot;&lt;/td&gt;&quot;</span>;</span><br><span class="language-javascript"></span><br><span class="language-javascript">                <span class="hljs-keyword">var</span> a = tr.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">&quot;a&quot;</span>)[<span class="hljs-number">0</span>];</span><br><span class="language-javascript">                a.<span class="hljs-property">onclick</span> = delA;</span><br><span class="language-javascript"></span><br><span class="language-javascript">                <span class="hljs-keyword">var</span> employeeTable =<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;employeeTable&quot;</span>);</span><br><span class="language-javascript">                <span class="hljs-keyword">var</span> tbody = employeeTable.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">&quot;tbody&quot;</span>)[<span class="hljs-number">0</span>];</span><br><span class="language-javascript">                tbody.<span class="hljs-title function_">appendChild</span>(tr);</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">          </span><br><span class="language-javascript"></span><br><span class="language-javascript">        &#125;;</span><br><span class="language-javascript"></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><br>		<span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;employeeTable&quot;</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Email<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Salary<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span><span class="hljs-symbol">&amp;nbsp;</span><span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>			<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Tom<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>tom@tom.com<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>5000<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;javascript:;&quot;</span>&gt;</span>Delete<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>				<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>			<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Jerry<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>jerry@sohu.com<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>8000<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;deleteEmp?id=002&quot;</span>&gt;</span>Delete<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>				<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>			<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Bob<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>bob@tom.com<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>10000<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;deleteEmp?id=003&quot;</span>&gt;</span>Delete<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>				<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>			<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>		<span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span><br><br>		<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;formDiv&quot;</span>&gt;</span><br><br>			<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span>添加新员工<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span><br><br>			<span class="hljs-tag">&lt;<span class="hljs-name">table</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;word&quot;</span>&gt;</span>name: <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;inp&quot;</span>&gt;</span><br>						<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;empName&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;empName&quot;</span> /&gt;</span><br>					<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;word&quot;</span>&gt;</span>email: <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;inp&quot;</span>&gt;</span><br>						<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;email&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;email&quot;</span> /&gt;</span><br>					<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;word&quot;</span>&gt;</span>salary: <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;inp&quot;</span>&gt;</span><br>						<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;salary&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;salary&quot;</span> /&gt;</span><br>					<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">align</span>=<span class="hljs-string">&quot;center&quot;</span>&gt;</span><br>						<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;addEmpButton&quot;</span>&gt;</span><br>						Submit<br>					<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>					<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>				<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>			<span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span><br><br>		<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="8-6DOM对CSS的操作"><a href="#8-6DOM对CSS的操作" class="headerlink" title="8.6DOM对CSS的操作"></a>8.6DOM对CSS的操作</h4><h5 id="8-6-1-读取和修改内联样式"><a href="#8-6-1-读取和修改内联样式" class="headerlink" title="8.6.1 读取和修改内联样式"></a>8.6.1 读取和修改内联样式</h5><p>使用style属性来操作元素的内联样式<br>读取内联样式：<br>语法：元素.style.样式名<br>例子：<br>元素.style.width<br>元素.style.height<br>注意：<strong>如果样式名中带有-，则需要将样式名修改为驼峰命名法将-去掉，然后后的字母改大写</strong><br>比如：backgroundcolor &gt; backgroundColor<br>borderwidth &gt; borderWidth<br>修改内联样式：<br>语法：元素.style.样式名 &#x3D; 样式值<br><strong>通过style修改和读取的样式都是内联样式</strong>，由于内联样式的优先级比较高，<br>所以我们通过JS来修改的样式，往往会立即生效，<br><strong>但是如果样式中设置了!important，则内联样式将不会生效。</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-id">#inner</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: yellow;</span><br><span class="language-css">            <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> box1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;inner&quot;</span>);</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> btn01 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;btn01&quot;</span>);</span><br><span class="language-javascript">            btn01.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript"></span><br><span class="language-javascript">                    box1.<span class="hljs-property">style</span>.<span class="hljs-property">width</span> = <span class="hljs-string">&quot;500px&quot;</span>;</span><br><span class="language-javascript">                    box1.<span class="hljs-property">style</span>.<span class="hljs-property">height</span> =  <span class="hljs-string">&quot;500px&quot;</span>;</span><br><span class="language-javascript">                    box1.<span class="hljs-property">style</span>.<span class="hljs-property">backgroundColor</span> = <span class="hljs-string">&quot;red&quot;</span>;</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> btn02 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;btn02&quot;</span>);</span><br><span class="language-javascript">				btn02.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(box1.<span class="hljs-property">style</span>.<span class="hljs-property">width</span>); <span class="hljs-comment">//只有先点击按钮1后才可以读取到内联样式css样式</span></span><br><span class="language-javascript">				&#125;;</span><br><span class="language-javascript">        &#125;;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>= <span class="hljs-string">&quot;btn01&quot;</span> &gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn02&quot;</span>&gt;</span>按钮2<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>= <span class="hljs-string">&quot;inner&quot;</span> &gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h5 id="8-6-2-读取元素的当前样式"><a href="#8-6-2-读取元素的当前样式" class="headerlink" title="8.6.2 读取元素的当前样式"></a>8.6.2 读取元素的当前样式</h5><p>正常浏览器<br><strong>使用getComputedStyle()</strong><br>这个方法是window对象的方法，可以返回一个对象，这个对象中保存着当前元素生效样式<br>参数：<br>1.要获取样式的元素<br>2.可以传递一个伪元素，一般传null<br>例子：<br>获取元素的宽度<br>getComputedStyle(box , null)[“width”];<br>通过该方法读取到样式都是只读的不能修改</p>
<p>IE8<br><strong>使用currentStyle</strong><br>语法：<br>元素.currentStyle.样式名<br>例子：<br>box.currentStyle[“width”]<br>通过这个属性读取到的样式是只读的不能修改</p>
<p><strong>实现兼容性</strong></p>
<p>&#x2F;&#x2F;对象.属性不存在，不会报错，如果直接寻找对象，（当前作用域到全局作用域）找不到会报错</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/css&quot;</span>&gt;</span><span class="language-css"></span><br><span class="language-css">			</span><br><span class="language-css">			<span class="hljs-selector-id">#box1</span>&#123;</span><br><span class="language-css">				<span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">background-color</span>: yellow;</span><br><span class="language-css">			&#125;</span><br><span class="language-css">			</span><br><span class="language-css">		</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>		<br>		<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">			</span><br><span class="language-javascript">			<span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				<span class="hljs-comment">//点击按钮以后读取box1的样式</span></span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> box1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;box1&quot;</span>);</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> btn01 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;btn01&quot;</span>);</span><br><span class="language-javascript">				btn01.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">					<span class="hljs-keyword">var</span> w = <span class="hljs-title function_">getStyle</span>(box1,<span class="hljs-string">&quot;width&quot;</span>);</span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(w);</span><br><span class="language-javascript">				&#125;;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">			&#125;;</span><br><span class="language-javascript">			</span><br><span class="language-javascript">			<span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * 定义一个函数，用来获取指定元素的当前的样式</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * 参数：</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * 		obj 要获取样式的元素</span></span><br><span class="hljs-comment"><span class="language-javascript">			 * 		name 要获取的样式名</span></span><br><span class="hljs-comment"><span class="language-javascript">			 */</span></span><br><span class="language-javascript">			</span><br><span class="language-javascript">			<span class="hljs-keyword">function</span> <span class="hljs-title function_">getStyle</span>(<span class="hljs-params">obj , name</span>)&#123;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				<span class="hljs-keyword">if</span>(<span class="hljs-variable language_">window</span>.<span class="hljs-property">getComputedStyle</span>)&#123;</span><br><span class="language-javascript">					<span class="hljs-comment">//正常浏览器的方式，具有getComputedStyle()方法</span></span><br><span class="language-javascript">					<span class="hljs-keyword">return</span> <span class="hljs-title function_">getComputedStyle</span>(obj , <span class="hljs-literal">null</span>)[name];</span><br><span class="language-javascript">				&#125;<span class="hljs-keyword">else</span>&#123;</span><br><span class="language-javascript">					<span class="hljs-comment">//IE8的方式，没有getComputedStyle()方法</span></span><br><span class="language-javascript">					<span class="hljs-keyword">return</span> obj.<span class="hljs-property">currentStyle</span>[name];</span><br><span class="language-javascript">				&#125;</span><br><span class="language-javascript">				<span class="hljs-comment">//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];	</span></span><br><span class="language-javascript">			&#125;</span><br><span class="language-javascript">		</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn01&quot;</span>&gt;</span>点我一下<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box1&quot;</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>

<h5 id="8-6-2-其他的样式相关的属性"><a href="#8-6-2-其他的样式相关的属性" class="headerlink" title="8.6.2 其他的样式相关的属性"></a>8.6.2 其他的样式相关的属性</h5><p>注意：以下样式都是只读的,未指明偏移量都是相对于当前窗口左上角</p>
<p>clientHeight : 元素的可见高度，包括元素的<strong>内容区和内边距</strong>的高度<br>clientWidth : 元素的可见宽度，包括元素的<strong>内容区和内边距</strong>的宽度<br>offsetHeight : 整个元素的高度，包括<strong>内容区、内边距、边框</strong><br>offfsetWidth : 整个元素的宽度，包括内容区、内边距、边框<br>offsetParent : 当前元素的定位父元素<br>离他最近的开启了定位的祖先元素，如果所有的元素都没有开启定位，则返回body<br>offsetLeft<br>offsetTop<br>当前元素和定位父元素之间的偏移量<br>offsetLeft水平偏移量 offsetTop垂直偏移量</p>
<p>scrollHeight<br>scrollWidth<br>获取元素滚动区域的高度和宽度</p>
<p>scrollTop<br>scrollLeft<br>获取元素垂直和水平滚动条滚动的距离</p>
<p>判断滚动条是否滚动到底<br><strong>垂直滚动条 : scrollHeight -scrollTop &#x3D; clientHeight</strong></p>
<p><strong>水平滚动 : scrollWidth -scrollLeft &#x3D; clientWidth</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/css&quot;</span>&gt;</span><span class="language-css"></span><br><span class="language-css">			</span><br><span class="language-css">			<span class="hljs-selector-id">#box1</span>&#123;</span><br><span class="language-css">				<span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">				<span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">border</span>: <span class="hljs-number">10px</span> solid yellow;</span><br><span class="language-css">			&#125;</span><br><span class="language-css">			</span><br><span class="language-css">			</span><br><span class="language-css">			<span class="hljs-selector-id">#box2</span>&#123;</span><br><span class="language-css">				<span class="hljs-attribute">padding</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#bfa</span>;</span><br><span class="language-css">			&#125;</span><br><span class="language-css">			</span><br><span class="language-css">			<span class="hljs-selector-id">#box4</span>&#123;</span><br><span class="language-css">				<span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#bfa</span>;</span><br><span class="language-css">				<span class="hljs-attribute">overflow</span>: auto;</span><br><span class="language-css">			&#125;</span><br><span class="language-css">			</span><br><span class="language-css">			<span class="hljs-selector-id">#box5</span>&#123;</span><br><span class="language-css">				<span class="hljs-attribute">width</span>: <span class="hljs-number">450px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">height</span>: <span class="hljs-number">600px</span>;</span><br><span class="language-css">				<span class="hljs-attribute">background-color</span>: yellow;</span><br><span class="language-css">			&#125;</span><br><span class="language-css">			</span><br><span class="language-css">		</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">			</span><br><span class="language-javascript">			<span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> box1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;box1&quot;</span>);</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> btn01 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;btn01&quot;</span>);</span><br><span class="language-javascript">				<span class="hljs-keyword">var</span> box4 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;box4&quot;</span>);</span><br><span class="language-javascript">				</span><br><span class="language-javascript">				btn01.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">					</span><br><span class="language-javascript">					<span class="hljs-comment">// alert(box1.clientWidth); //120</span></span><br><span class="language-javascript">					<span class="hljs-comment">// alert(box1.clientHeight); //120</span></span><br><span class="language-javascript">					<span class="hljs-comment">// alert(box1.offsetWidth); //140</span></span><br><span class="language-javascript">					<span class="hljs-comment">// var op = box1.offsetParent;</span></span><br><span class="language-javascript">					<span class="hljs-comment">// alert(op.id);  //box2</span></span><br><span class="language-javascript">					<span class="hljs-comment">// alert(box1.offsetLeft); //100</span></span><br><span class="language-javascript">					</span><br><span class="language-javascript">					<span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">					 * scrollWidth</span></span><br><span class="hljs-comment"><span class="language-javascript">					 * scrollHeight</span></span><br><span class="hljs-comment"><span class="language-javascript">					 * 	- 可以获取元素整个滚动区域的宽度和高度</span></span><br><span class="hljs-comment"><span class="language-javascript">					 */</span></span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(box4.<span class="hljs-property">clientHeight</span>);   <span class="hljs-comment">//283</span></span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(box4.<span class="hljs-property">scrollWidth</span>);	<span class="hljs-comment">//450</span></span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(box4.<span class="hljs-property">scrollLeft</span>);<span class="hljs-comment">//0</span></span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(box4.<span class="hljs-property">scrollTop</span>);<span class="hljs-comment">//0</span></span><br><span class="language-javascript"></span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(box4.<span class="hljs-property">scrollHeight</span> - box4.<span class="hljs-property">scrollTop</span>); <span class="hljs-comment">// 283</span></span><br><span class="language-javascript">					</span><br><span class="language-javascript">				&#125;;</span><br><span class="language-javascript">				</span><br><span class="language-javascript">			&#125;;</span><br><span class="language-javascript">			</span><br><span class="language-javascript">			</span><br><span class="language-javascript">		</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">body</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;body&quot;</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn01&quot;</span>&gt;</span>点我一下<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br>		<br>		 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box4&quot;</span>&gt;</span><br>		 	<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box5&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>		 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>		<span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br>		<br>		<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box3&quot;</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box2&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;position: relative;&quot;</span>&gt;</span><br>				<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>			<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>		<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>		<br>		<br>	<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                
              </div>
              <p class="note note-warning">
                <strong>本文作者: </strong><a href="/HexoPage/">xiao_aodi</a> <br>
                <!-- <strong>本文链接: </strong><a href="http://xiao_aodi.gitee.io/hexopage/2022/03/19/js%E7%AC%AC%E4%B8%89%E9%83%A8%E5%88%86%E7%AC%94%E8%AE%B0/">http://xiao_aodi.gitee.io/hexopage/2022/03/19/js%E7%AC%AC%E4%B8%89%E9%83%A8%E5%88%86%E7%AC%94%E8%AE%B0/</a> <br> -->
                <strong>版权声明: </strong>本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                   </p>
                   

              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/HexoPage/2022/03/21/js%E7%AC%AC%E5%9B%9B%E9%83%A8%E5%88%86%E7%AC%94%E8%AE%B0/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">JavaScript学习笔记（第四部分）总共四部分(完结)</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/HexoPage/2022/03/18/js%E7%AC%AC%E4%BA%8C%E9%83%A8%E5%88%86%E7%9A%84%E7%AC%94%E8%AE%B0/">
                        <span class="hidden-mobile">JavaScript学习笔记（第二部分）总共四部分</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  
   <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>  
  <!-- 添加网站运行时间 -->
  <div class="footer-content">
    <div>
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
      <script>
      var now = new Date();
      function createtime(){
          var grt= new Date("03/10/2022 00:00:00");//此处修改你的建站时间或者网站上线时间
          now.setTime(now.getTime()+250);
          days = (now - grt ) / 1000 / 60 / 60 / 24;
          dnum = Math.floor(days);
          hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
          hnum = Math.floor(hours);
          if(String(hnum).length ==1 ){
              hnum = "0" + hnum;
          }
          minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
          mnum = Math.floor(minutes);
          if(String(mnum).length ==1 ){
                    mnum = "0" + mnum;
          }
          seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
          snum = Math.round(seconds);
          if(String(snum).length ==1 ){
                    snum = "0" + snum;
          }
          document.getElementById("timeDate").innerHTML = "🚀 &nbsp"+dnum+"&nbsp天";  //此次自定义显示内容
          document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
      }  //此次自定义显示内容
      setInterval("createtime()",250);
      </script>
    </div>
  </div>
  <!-- 统计访问量信息 -->
  
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


  <!-- 个人和备案信息 -->
  <div>©2022-2023<a target="_blank" rel="noopener" href="https://clearlight.blog.csdn.net/">ClearlightY</a> <a target="_blank" rel="noopener" href="http://beian.miit.gov.cn/">冀ICP备19019307号-2</a></div>
   
  <!-- 备案信息 -->
  <div class="beian">
    <span>
      <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
        京ICP证123456号
      </a>
    </span>
    
      
        <span>
          <a
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12345678"
            rel="nofollow noopener"
            class="beian-police"
            target="_blank"
          >
            
              <span style="visibility: hidden; width: 0">|</span>
              <img src="/HexoPage/img/police_beian.png" alt="police-icon"/>
            
            <span>京公网安备12345678号</span>
          </a>
        </span>
      
    
  </div>


  
</footer>

<!-- SCRIPTS -->

  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.min.js" ></script>
<script  src="/HexoPage/js/events.js" ></script>
<script  src="/HexoPage/js/plugins.js" ></script>

<!-- Plugins -->


  <script  src="/HexoPage/js/local-search.js" ></script>





  



  
    <script  src="https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4/anchor.min.js" ></script>
  
  
    <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" ></script>
  



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
        typing(title);
      
    })(window, document);
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/HexoPage/js/boot.js" ></script>




  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.min.js" ></script>
<script  src="/HexoPage/js/events.js" ></script>
<script  src="/HexoPage/js/plugins.js" ></script>

<!-- Plugins -->


  <script  src="/HexoPage/js/local-search.js" ></script>





  



  
    <script  src="https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4/anchor.min.js" ></script>
  
  
    <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" ></script>
  



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
        typing(title);
      
    })(window, document);
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/HexoPage/js/boot.js" ></script>


</body>
</html>
